<!DOCTYPE html>
<html>
<head>
  <title>ViSH Search API</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="search.js"></script>
  <link rel="stylesheet" type="text/css" href="search.css"/>
</head>
<body>

  <%content_for :javascript do%>
      VASearch.init({locale: 'en', draw: "boxes", allowAddInstance:true});
  <%end%>

  <div id="asearch_header">
    <div class="search">
      <input class="asearch_box search_input" type="text" placeholder="Search educational resources" autocomplete="off">
      <button class="toolbar_button search_button">
        <img class="search_button_img" src="search.png">
      </button>
      <button class="toolbar_button settings_button">
        <img class="settings_button_img" src="settings.png">
      </button>
    </div>
  </div>

  <div id="asearch_results">
  </div>

  <div id="asearch_settings">
    <div class="settingsColumn">
      <p class="settingsTitle">Select Entities to search</p>
      <select multiple="" class="entity_types">
        <option selected="selected" value="Resource">All Resources</option>
          <option value="Audio">Audios</option>
          <option value="Category">Categories</option>
          <option value="Document">Documents</option>
          <option value="Embed">Embeds</option>
          <option value="Event">Events</option>
          <option value="Excursion">Excursions</option>
          <option value="Link">Links</option>
          <option value="Officedoc">Office documents</option>
          <option value="Picture">Pictures</option>
          <option value="Scormfile">SCORM Packages</option>
          <option value="Swf">Flash Objects</option>
          <option value="User">Users</option>
          <option value="Video">Videos</option>
          <option value="Webapp">Web Applications</option>
          <option value="Zipfile">ZIP files</option>
      </select>
    </div>

    <div class="settingsColumn">
      <p class="settingsTitle">Sorting</p>
      <select asparam="sort_by">
        <option selected="selected" value="Relevance">Relevance</option>
        <option value="ranking">Ranking</option>
        <option value="popularity">Popularity</option>
        <option value="modification">Modification</option>
        <option value="creation">Creation</option>
        <option value="visits">Visits</option>
        <option value="favorites">Favorites</option>
        <option value="quality">Quality</option>
      </select>

      <p class="settingsTitleSec">Filters</p>
      <p class="settingsField" style="margin-top: 9px !important;">Date Range</p>
      <div class="dateWrapper">
        <div>
          <p>Start Date</p>
          <input type="date" asparam="startDate" name="startDate">
        </div>
        <div>
          <p>End Date</p>
          <input type="date" asparam="endDate" name="endDate">
        </div>
      </div>
      <p class="settingsField">Language</p>
      <select asparam="language">
        <option selected="selected" value="">Any</option>
          <option value="independent">Language independent</option>
          <option value="nl">Dutch</option>
          <option value="en">English</option>
          <option value="fr">French</option>
          <option value="de">German</option>
          <option value="hu">Hungarian</option>
          <option value="it">Italian</option>
          <option value="pt">Portuguese</option>
          <option value="ru">Russian</option>
          <option value="es">Spanish</option>
          <option value="ot">Others</option>
      </select>
      <p class="settingsField" style="margin-top: 20px !important;"><span>Quality Threshold (0-10): &nbsp;</span><span asparam="rangeValue">5.0</span></p>
      <input asparam="qualityThreshold" type="range" min="0" max="10" step="0.1" value="5">
    </div>

    <div class="settingsColumn">
      <p class="settingsTitle">ViSH Instances <span class="closeASearchSettings">close</span></p>

      <p class="settingsField">Results per instance</p>
      <select asparam="n">
        <option value="1">1</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option selected="selected" value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>

      <p class="settingsField">ViSH Instances</p>
      <div class="ViSHinstances">
        <div class="addInstanceInputWrapper" style="display:none">
          <input type="text" class="addInstanceInput" placeholder="Add Instance">
          <span class="addInstanceButton" title="add">[Add]</span>
        </div>
        <ul>
            <li>
              <input type="checkbox" checked="">&nbsp;
              <span>http://localhost:3000</span>
            </li>
            <li>
              <input type="checkbox" checked="">&nbsp;
              <span>http://vishub.org</span>
            </li>
        </ul>
      </div>
      <p class="settingsTitleSec">Visualization options</p>
      <select style="margin-top: 9px !important;" asparam="visualization">
        <option value="boxes">View as avatars</option>
        <option value="table">View as table</option>
      </select>
    </div>
  </div>

</body>
</html>
